---
title: "Snippet"
---

# Snippet

Snippet is a widget that displays highlighted attributes from a hit. It is commonly used to display snippets of an attribute where the search query has matched.

## Differences between highlighting and snippets

Highlighting and snippets are very similar. The main difference is that highlighting is returns the whole field value, highlighting the matches while snippets returns a part of the field value, highlighting the matches.

Highlighting would be useful for short value fields like title.

Snippets would be useful for long value fields like description.

## Setup

The following document indexed in Elasticsearch:

```json
{
  "brand": "Apple",
  "product": "Macbook Pro 14",
  "in_stock": true,
  "shipping": 10 
}
```

## Searchkit Setup

Within `highlight_attributes` in `search_settings`:

```ts
{
  search_settings: {
    snippet_attributes: ['description']
  }
}
```

### Changing length of snippet

The default length of the snippet is 100 characters. You can change this like so:

```ts
{
  search_settings: {
    snippet_attributes: ['description:200'] // snippet length will be 200 characters
  }
}
```

## Usage

Below is an example of a `hitView` that displays the `product` attribute with the search query highlighted.

```jsx

const hitView = ({ hit }) => {
  return (
    <div>
      <h2><Snippet hit={hit} attribute="description" /></h2>
    </div>
  )
}

```

## Documentation

- [JS Widgets](https://www.algolia.com/doc/api-reference/widgets/snippet/js/)
- [React InstantSearch](https://www.algolia.com/doc/api-reference/widgets/snippet/react/)
- [Vue InstantSearch](https://www.algolia.com/doc/api-reference/widgets/snippet/vue/)
- [Angular InstantSearch](https://www.algolia.com/doc/api-reference/widgets/snippet/angular/)

## Troubleshooting

1. Make sure you have the `highlight_attributes` in the `search_settings` configuration.
2. Make sure the attributes are also specified in the `search_attributes` too, and match the same field.